<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="sec"
	uri="http://www.springframework.org/security/tags"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>

<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" >
<head>
<title>Show Route</title>

<link href="views/css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="views/css/bootstrap-theme.css" rel="stylesheet"
	type="text/css">
<link href="views/css/cover.css" rel="stylesheet" type="text/css">
<link href="views/css/sample.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="views/js/jquery.min.js"></script>
<script type="text/javascript" src="views/js/bootstrap.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript">
	var rendererOptions = {
		draggable : true
	};
	var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
	var directionsService = new google.maps.DirectionsService();
	var map;
	
	function initialize() {
		var centerPoint, geoPoint = null;
		
		var address = '<c:out value="${findRoute.sourcePlace}"></c:out>';
		geocoder = new google.maps.Geocoder();

		geocoder.geocode({
			'address' : address
		}, function(results, status) {
			if (results != null && results.length >= 1) {
				centerPoint = new google.maps.LatLng(
						results[0].geometry.location.lat(),
						results[0].geometry.location.lng());
				
				var mapOptions = {
						zoom : 7,
						center : centerPoint
					};
				map = new google.maps.Map(document.getElementById('map-canvas'),
							mapOptions);
				directionsDisplay.setMap(map);
				directionsDisplay.setPanel(document.getElementById('directionsPanel'));

				google.maps.event.addListener(directionsDisplay, 'directions_changed',
						function() {
							computeTotalDistance(directionsDisplay.directions);
				});

					
			}
		});
	}

	function computeTotalDistance(result) {
		var total = 0;
		var myroute = result.routes[0];
		for (i = 0; i < myroute.legs.length; i++) {
			total += myroute.legs[i].distance.value;
		}
		total = total / 1000.
		document.getElementById("total").innerHTML = total + " km";
	}

	function calcRoute() {
		var start = '<c:out value="${findRoute.sourcePlace}"></c:out>';
		var end = '<c:out value="${findRoute.destPlace}"></c:out>';
		var request = {
			origin : start,
			destination : end,
			avoidTolls : true,
			travelMode : google.maps.TravelMode.DRIVING
		};
		directionsService.route(request, function(response, status) {
			if (status == google.maps.DirectionsStatus.OK) {
				directionsDisplay.setDirections(response);
				addMarkers();
			}
		});
	}
	function addMarkers() {
		var markerLocation;
		geocoder = new google.maps.Geocoder();

		<c:forEach var="station" items="${parsedList}" varStatus="status">
			address = "${station.fullAddress}";
			geocoder.geocode({
				'address' : address
			}, function(results, status) {
				if (results != null && results.length >= 1) {
					markerLocation = new google.maps.LatLng(
							results[0].geometry.location.lat(),
							results[0].geometry.location.lng());
					var marker = new google.maps.Marker({
						position : markerLocation,
						map : map,
						title : "${station.fullAddress} - ${station.PPG}$"
					});
				}
			});
			</c:forEach>
	}

	google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body onload="calcRoute();">

<div id="wrapper">
		<div id="header">
			<jsp:include page="common/header.jsp"></jsp:include>
		</div>
			<div id="content">
					<div id="map-canvas" style="float: left; width: 70%; height: 75%;margin:1px solid black;"></div>
					<div id="directionsPanel" style="float: right; width: 30%; height: 75%;margin:1px solid black;">
						<p>
							Total Distance: <span id="total"></span>
						</p>
					</div>
		</div>
		<div id="footer">
			<jsp:include page="common/footer.jsp"></jsp:include>
		</div>
</div>

</body>
</html>